<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
				.moduleTitle {
				padding: 10px;
				border-left: solid 5px #35d0c9;
				background-color: rgba(255, 255, 255, .7);
				border-bottom-right-radius: 0px;
				border-top-right-radius: 0px;
			}
			
			img.hotline {
				height: auto !important;
				max-width: initial !important;
				width: 100%;
			}
			
			p.price {
				position: absolute;
				bottom: 11px;
			}
			
			button.more {
				margin: 10px auto;
				background-color: transparent;
				color: palevioletred;
				border: solid 2px palevioletred;
				border-radius: 10px;
				padding: 4px;
				width: 38%;
			}
			
			div.xinluDes {
				position: absolute !important;
				opacity: 0.5 !important;
				background: #000 !important;
				color: #fff !important;
				height: 50px !important;
				font-family: '微软雅黑';
				font-size: 18px !important;
				bottom: 5px !important;
				line-height: 50px !important;
				box-shadow: 0px 0px 6px #000;
				http: //127.0.0.1:8020/travel/img/xianlu_pic3.jpg}
				img.xinluImg {
					height: 200px !important;
				}
				.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
					background-color: #35d0c9;
				}
				.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
					color: #35d0c9;
					border-bottom: 2px solid #007aff;
					background: 0 0;
				}
				img.freeImg {
					line-height: 100px !important;
					max-width: 150px !important;
					height: 100px !important;
				}
				p.freeDes {
					white-space: normal !important;
				}
				#cityChoice {
					font-size: 17px;
					height: 44px;
					display: inline-block;
					line-height: 44px;
					padding: 0px;
					padding-right: 10px;
					padding-left: 10px;
					color: #323232;
					background-color: transparent;
					font-size: 14px;
					color: #35d0c9;
				}
				.condition {
					position: relative;
					clear: both;
					overflow: hidden;
					height: 24px;
					line-height: 24px;
				}
				.condition span.jia {
					position: absolute;
					left: 3px;
					color: orange
				}
				.condition span.jia i.price {
					font-size: 18px;
				}
				.condition span.chakan {
					position: absolute;
					right: 3px;
					font-size: 14px;
					color: #ccc;
				}
		</style>
	</head>

	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	<script src="js/mui.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		mui.plusReady(function() {
			getGeocode();
		});

		var watchId;

		function geoInf(position) {
			var str = "";
			str += "地址：" + position.addresses + "\n"; //获取地址信息
			str += "坐标类型：" + position.coordsType + "\n";
			var timeflag = position.timestamp; //获取到地理位置信息的时间戳；一个毫秒数；
			str += "时间戳：" + timeflag + "\n";
			var codns = position.coords; //获取地理坐标信息；
			var lat = codns.latitude; //获取到当前位置的纬度；
			str += "纬度：" + lat + "\n";
			var longt = codns.longitude; //获取到当前位置的经度
			str += "经度：" + longt + "\n";
			var alt = codns.altitude; //获取到当前位置的海拔信息；
			str += "海拔：" + alt + "\n";
			var accu = codns.accuracy; //地理坐标信息精确度信息；
			str += "精确度：" + accu + "\n";
			var altAcc = codns.altitudeAccuracy; //获取海拔信息的精确度；
			str += "海拔精确度：" + altAcc + "\n";
			var head = codns.heading; //获取设备的移动方向；
			str += "移动方向：" + head + "\n";
			var sped = codns.speed; //获取设备的移动速度；
			str += "移动速度：" + sped;
			//			alert(position);
			//			alert(JSON.stringify(position));
			//			alert(position.address.city);
			//			outLine(str);
			document.getElementById("cityChoice").innerText = position.address.city;
			document.getElementById("cityChoice_pub").innerText = position.address.city;
		}

		function getPos() {
			//			outSet("获取位置信息:");
			plus.geolocation.getCurrentPosition(geoInf, function(e) {
				//				outSet("获取位置信息失败：" + e.message);
			}, {
				geocode: false
			});
		}

		function watchPos() {
			if(watchId) {
				return;
			}
			watchId = plus.geolocation.watchPosition(function(p) {
				//				outSet("监听位置变化信息:");
				geoInf(p);
			}, function(e) {
				//				outSet("监听位置变化信息失败：" + e.message);
			}, {
				geocode: false
			});
		}

		function clearWatch() {
			if(watchId) {
				//				outSet("停止监听位置变化信息");
				plus.geolocation.clearWatch(watchId);
				watchId = null;
			}
		}
		// 通过定位模块获取位置信息
		function getGeocode() {
			//			outSet("获取定位位置信息:");
			plus.geolocation.getCurrentPosition(geoInf, function(e) {
				alert("获取定位位置信息失败：" + e.message);
			}, {
				geocode: true
			});
		}
	</script>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">标题</h1>

		</header>
		<div class="mui-content">
			<!--start-->
			<div class="mui-slider" style="background-color: #fff;">
				<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item item mui-active findItem" href="#item1" id="findItem1">周边游</a>
					<a class="mui-control-item item findItem" href="#item2" id="findItem2">发现酒店</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1" class="mui-slider-item mui-control-content mui-active">
						<!--城市选择   s-->
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell citys" id="citys">
								<a class="mui-navigate-right">
									<span class="mui-badge mui-badge-danger cityChoice" id="cityChoice">未定位</span> 城市选择
								</a>
							</li>
						</ul>
						<!--城市选择  e-->
						<!--周边列表   s-->
						<ul class="mui-table-view mui-grid-view findList" id="list">
							<li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in items">
								<a href="#" data-guid="item.guid">
									<img class="mui-media-object" :src="item.cover">
									<div class="mui-media-body">{{item.title}}</div>
									<div class="condition">
										<span class="jia">￥<i class="price">{{item.author}}</i>起</span>
										<span class="chakan">查看详情</span>

									</div>
								</a>
							</li>
						</ul>

						<!--周边列表   e-->

					</div>
				</div>

				<!--end-->

			</div>
			<script src="js/vue.min.js"></script>
			<script type="text/javascript">
				$(function() {
					document.getElementById("citys").addEventListener("tap", function() {

						mui.openWindow({
							url: "city.html"
						});

					})
					window.addEventListener('near2', function(event) {
						mui.plusReady(function() {
							var yourChoice = event.detail.choice;
							alert(yourChoice);
							document.getElementById("cityChoice").innerText = yourChoice;
						})

					}, false);
				})
			</script>
			<script type="text/javascript">
				var lastId = ''; //最新新闻的id
				var webview_detail = null; //详情页webview
				var titleNView = { //详情页原生导航配置
					backgroundColor: '#f7f7f7', //导航栏背景色
					titleText: '', //导航栏标题
					titleColor: '#000000', //文字颜色
					type: 'transparent', //透明渐变样式
					autoBackButton: true, //自动绘制返回箭头
					splitLine: { //底部分割线
						color: '#cccccc'
					}
				}
				mui.plusReady(function() {
					//预加载详情页
					webview_detail = mui.preload({
						url: 'detail.html',
						id: 'news_detail',
						styles: {
							"render": "always",
							"popGesture": "hide",
							"bounce": "vertical",
							"bounceBackground": "#efeff4",
							"titleNView": titleNView
						}
					});
					//发现酒店的切换
					document.getElementById("findItem2").addEventListener("tap", function() {
						bb();
						mui.openWindow({
							url: 'tab-top-subpage-2.html'
						})
					})
				});
				//mui初始化，配置下拉刷新
				mui.init({
					pullRefresh: {
						container: "#list",
						down: {
							style: 'circle',
							offset: '0px',
							auto: true,
							callback: aa,

							//end

						}
					}
				});

				var news = new Vue({
					el: "#item1",
					data: {
						banner: {}, //顶部banner数据
						items: [] //列表信息流数据
					}
				});

				//点击列表，打开详情
				//TODO 后续应该封装一个v-tap指令，实现tap监听
				mui('.mui-content').on('tap', '[data-guid]', function() {
					var guid = this.getAttribute('data-guid');
					//var title = this.querySelector(".mui-ellipsis-2").innerHTML.trim();
					var author = this.querySelector(".author").innerHTML;
					var time = this.querySelector(".time").innerHTML;
					var cover = this.querySelector("img").getAttribute("src");
					open_detail(guid, title, author, time, cover);
				});

				/**
				 * 打开新闻详情
				 * 
				 * @param {String} guid 新闻ID
				 * @param {String} title  新闻标题
				 */
				function open_detail(guid, title, author, time, cover) {
					//若详情页尚未预加载完成，则延时等待再执行
					if(!webview_detail) {
						setTimeout(function() {
							open_detail(guid);
						}, 100);
					}
					//触发子窗口变更新闻详情
					mui.fire(webview_detail, 'get_detail', {
						guid: guid,
						title: title,
						author: author,
						time: time,
						cover: cover
					});

					//更改详情页原生导航条信息
					titleNView.titleText = title;
					webview_detail.setStyle({
						"titleNView": titleNView
					});
					setTimeout(function() {
						webview_detail.show("slide-in-right", 300);
					}, 150);
				}

				/**
				 * 1、将服务端返回数据，转换成前端需要的格式
				 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
				 * 
				 * @param {Array} items 
				 */
				function convert(items) {
					var newItems = [];
					items.forEach(function(item) {
						newItems.push({
							guid: item.post_id,
							title: item.title,
							author: item.author_name,
							cover: item.cover,
							time: dateUtils.format(item.published_at)
						});
					});
					return newItems;
				}

				/**
				 * 格式化时间的辅助类，将一个时间转换成x小时前、y天前等
				 */
				var dateUtils = {
					UNITS: {
						'年': 31557600000,
						'月': 2629800000,
						'天': 86400000,
						'小时': 3600000,
						'分钟': 60000,
						'秒': 1000
					},
					humanize: function(milliseconds) {
						var humanize = '';
						mui.each(this.UNITS, function(unit, value) {
							if(milliseconds >= value) {
								humanize = Math.floor(milliseconds / value) + unit + '前';
								return false;
							}
							return true;
						});
						return humanize || '刚刚';
					},
					format: function(dateStr) {
						var date = this.parse(dateStr)
						var diff = Date.now() - date.getTime();
						if(diff < this.UNITS['天']) {
							return this.humanize(diff);
						}

						var _format = function(number) {
							return(number < 10 ? ('0' + number) : number);
						};
						return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' + _format(date.getHours()) + ':' + _format(date.getMinutes());
					},
					parse: function(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
						var a = str.split(/[^0-9]/);
						return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
					}
				};
				//周边游列表展示
				function aa() {
					if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
						plus.nativeUI.toast('似乎已断开与互联网的连接', {
							verticalAlign: 'top'
						});
						return;
					}

					var data = {
						column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
					}

					if(lastId) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
						data.lastId = lastId;
						data.time = new Date().getTime() + "";
					}

					//请求顶部banner信息
					mui.getJSON("http://spider.dcloud.net.cn/api/banner/36kr", data, function(rsp) {
						news.banner = {
							guid: rsp.post_id,
							title: rsp.title,
							cover: rsp.cover,
							author: rsp.author_name,
							time: dateUtils.format(rsp.published_at)
						};
					});

					//请求列表信息流
					mui.getJSON("http://spider.dcloud.net.cn/api/news", data, function(rsp) {
						mui('#list').pullRefresh().endPulldown();
						if(rsp && rsp.length > 0) {
							lastId = rsp[0].id; //保存最新消息的id，方便下拉刷新时使用
							news.items = news.items.concat(convert(rsp));
						}
					});
				}

			</script>
			<!--publist-->
	</body>

</html>